<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>登录</title>
  <link type="text/css" rel="stylesheet" th:href="@{/css/login.css}" />
  <script th:src="@{./js/JQuery2.1.4.js}"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var height=$(document).height();
      $('.main').css('height',height);
    })
  </script>
</head>

<body>
<div class="main">
  <div class="main0">
    <div class="main_left">
      <img th:src="@{/images/gms.jpg}" class="theimg"/>
    </div>
    <div class="main_right">
      <div class="main_r_up">
        <img th:src="@{/images/user1.png}"/>
        <div class="pp">登录</div>
      </div>
      <div class="sub"><p>还没有账号？<a th:href="@{../toregister}"><span class="blue">立即注册</span></a></p></div>
      <div><p th:text="${msg}"></p></div>
      <form id="loginForm" th:action="@{/loginUser}" method="Post">
      <div class="txt">
        <span style="letter-spacing:8px;">用户名:</span>
        <input type="text" class="txtphone" placeholder="请输入注册手机号" aria-describedby="sizing-addon1" required="required" name="aNumber" id="aNumber">
      </div>
      <div class="txt">
        <span style="letter-spacing:4px;">登录密码:</span>
        <input type="password" class="txtphone" placeholder="密码" aria-describedby="sizing-addon1"required="required" name="passWord" id="passWord">
      </div>
      <div class="txt">
        <span style=" float:left;letter-spacing:8px;">验证码:</span>
        <input type="text" required="required" class="txtyzm" name="valide" id="valide" placeholder="验证码">
        <img th:src="@{/defaultKaptcha}" class="yzmimg"/>
      </div>
      <div>
        <button type="submit" class="xiayibu">
        登录
      </button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="footer">
  <div class="footer0">
    <div class="footer_l">使用条款 | 隐私保护</div>
    <div class="footer_r">© 2021 广东海洋大学体育馆管理系统</div>
  </div>
</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery/lib/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/dist/jquery.validate.js}"></script>
<script>
  $().ready(function() {
    $("#loginForm").validate({
      rules: {
        aNumber: {
          required: true,
          checkaNumber:true
        },
        passWord: {
          required: true,
          rangelength:[6,12]
        },
        valide:{
          required:true
        }

      },
      messages: {
        aNumber: {
          required: "请输入账号",
        },
        passWord: {
          required: "请输入密码",
          rangelength: "密码由6-12位数组成"
        },
        valide: {
          required: "请输入验证码",
        },
      }
    });

    $.validator.addMethod("checkaNumber",function(value,element,params){
      var checkName = /^\d{11}$/;
      return this.optional(element)||(checkName.test(value));
    },"*只允许11位手机号码！");

  });
</script>
</html>